<template>
  <div v-loading="loading">
    <FixedOperation v-if="!(props.situationData || props.situationId)">
      <div class="flex items-center justify-between">
        <div class="leading-30px">
          <div class="inline-block">
            <svg-icon
              :icon-class="'svg_salesorder'"
              class="w-30px h-30px align-middle"
            />
            <span
              class="text-#000 leading-30px ml-10px text-16px font-bold align-bottom"
              >实施情况</span
            >
          </div>
          <div
            class="inline-block text-15px ml-10px"
            style="vertical-align: bottom"
            v-if="bpmnStatus"
          >
            <i
              :class="
                bpmnStatus == '审批通过'
                  ? 'h-8px w-8px bg-#fe9400 inline-block rounded'
                  : bpmnStatus == '流程未发起'
                  ? 'h-8px w-8px bg-#ccc inline-block rounded'
                  : 'h-8px w-8px bg-#10d070 inline-block rounded'
              "
            ></i>
            {{ bpmnStatus }}
          </div>
        </div>
        <div class="text-right">
          <slot></slot>
          <el-button
            type="primary"
            plain
            @click="handleSubmit('examine')"
            v-if="isExamine && isCanStart"
            >发起申请</el-button
          >
          <el-button
            type="primary"
            @click="handleSubmit('save')"
            v-if="!formDisabled"
            >保存</el-button
          >
          <!-- <el-button @click="handleReset(form)" v-if="isCanStart"
            >重置</el-button
          > -->
          <el-button type="primary" plain @click="handleReturn">返回</el-button>
        </div>
      </div>
    </FixedOperation>
    <div class="app-container form-box">
      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        :disabled="formDisabled"
        label-width="150px"
      >
        <el-row :gutter="80">
          <el-col :span="12">
            <el-form-item label="项目名称" prop="proName">
              <el-input
                disabled
                v-model="formData.proName"
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="proNum">
              <el-input
                disabled
                v-model="formData.proNum"
                placeholder="请输入项目编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实施日期" prop="implementationDate">
              <el-date-picker
                class="w-full"
                v-model="formData.implementationDate"
                :disabled="formDisabled || fieldDisabled.includes('实施日期')"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="请输入实施日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目周期" prop="cycleArr">
              <el-date-picker
                v-model="formData.cycleArr"
                :disabled="formDisabled || fieldDisabled.includes('项目周期')"
                type="daterange"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="init"
                class="w-full"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="projectLeaderName">
              <el-input
                class="w-full"
                v-model="formData.projectLeaderName"
                :disabled="formDisabled || fieldDisabled.includes('项目负责人')"
                placeholder="请选择项目负责人"
                @focus="selectUserFn('projectLeaderName')"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="detailList" label-width="0">
              <avue-crud
                ref="crudDetail"
                :disabled="formDisabled || fieldDisabled.includes('详情')"
                :option="crudOptionDetails"
                :data="formData.detailList"
                class="hide-required-asterisk"
              >
                <template #menu-left>
                  <el-button
                    type="primary"
                    icon="Plus"
                    @click="addEducation"
                    :disabled="formDisabled || fieldDisabled.includes('详情')"
                    >新增</el-button
                  >
                </template>
                <template #situation-header="{ column }">
                  <span class="text-red pr-2">*</span
                  ><span>{{ column.label }}</span>
                </template>
                <template #risk-header="{ column }">
                  <span class="text-red pr-2">*</span
                  ><span>{{ column.label }}</span>
                </template>
                <template #chargePersonName-header="{ column }">
                  <span class="text-red pr-2">*</span
                  ><span>{{ column.label }}</span>
                </template>
                <template #chargePersonName-form="{ row, index }">
                  <el-input
                    class="w-full"
                    :disabled="formDisabled || fieldDisabled.includes('详情')"
                    v-model="row.chargePersonName"
                    placeholder="请选择负责人"
                    @focus="selectUserFn('chargePersonName', index)"
                  >
                  </el-input>
                </template>
                <template #menu="{ row, index }">
                  <el-button
                    :disabled="formDisabled || fieldDisabled.includes('详情')"
                    plain
                    icon="Delete"
                    link
                    @click="delEducation(row, index)"
                    >删除</el-button
                  >
                </template>
                <template #empty>
                  <div>暂无数据</div>
                </template>
              </avue-crud>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="填报人" prop="createName">
              <el-input
                disabled
                v-model="formData.createName"
                placeholder="请输入填报人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-show="formData.fileName">
            <el-form-item label="文件名" prop="fileName">
              <el-input
                disabled
                v-model="formData.fileName"
                placeholder="请输入文件名"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="附件" prop="supplierEvaluateFileList">
              <template #label="{ label }">
                <div class="text-right">
                  {{ label }}
                </div>
                <el-popover
                  placement="top-start"
                  title="注意"
                  width="50%"
                  trigger="hover"
                >
                  <template #reference>
                    <el-icon><QuestionFilled /></el-icon>
                  </template>
                  <div>
                    <p>信用、供方资料（授权资质、最新营业执照等）</p>
                  </div>
                </el-popover>
              </template>
              <el-upload
                class="upload-demo"
                action="#"
                :before-upload="
                  file => beforeAvatarUpload(file, 'supplierEvaluateFileList')
                "
                :http-request="
                  params => requestFile(params, 'supplierEvaluateFileList')
                "
                :accept="uploadType['contract'].toString()"
                :limit="10"
                :show-file-list="false"
              >
                <el-button type="default" style="font-size: 14px"
                  ><el-icon><UploadFilled /></el-icon>上传</el-button
                >
                <template #tip>
                  <div class="el-upload__tip float-right">
                    {{
                      `支持格式${uploadType[
                        'contract'
                      ].toString()} ，单个文件不能超过20MB`
                    }}
                  </div>
                </template>
              </el-upload>
              <div class="text-14px mt-10px" style="width: 100%">
                <div
                  v-for="(item, index) in formData.supplierEvaluateFileList"
                  :key="item.fileName"
                >
                  <el-link
                    @click="viewFiles(item.url)"
                    :underline="false"
                    type="primary"
                    >{{ item.origFileName }}</el-link
                  >
                  <el-button
                    text
                    plain
                    @click="delFileName(index, 'supplierEvaluateFileList')"
                    >删除</el-button
                  >
                </div>
              </div>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>
    <div v-if="props.situationData || props.situationId" class="text-right">
      <el-button
        type="primary"
        plain
        @click="handleSubmit('examine')"
        v-if="isExamine && isCanStart"
        >发起申请</el-button
      >
      <el-button
        type="primary"
        @click="handleSubmit('save')"
        v-if="!formDisabled"
        >保存</el-button
      >
    </div>
    <!-- 提交审批 -->
    <SubmissionProcess
      :dialog-param="examineParam"
      :flowOptions="flowOptions"
      @initiate="handleClose('initiate')"
      @close="handleClose('examine')"
    ></SubmissionProcess>

    <!-- 人员弹出框下拉框 -->
    <SelectDialog
      :dialog-param="dialogParam"
      @ok="selectDialogData"
      @close="
        val => {
          dialogParam.isDialog = false
        }
      "
    />
  </div>
</template>
<script setup name="SituationForm">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useTagsViewStore from '@/store/modules/tagsView'
import {
  setSituation,
  getSituationDetail,
  delSituationDetailById
} from '@/api/projectManage/project'
import { uploadFile, delFile } from '@/api/salesManage/contractManage'
import { isMoneyNot, validateLen } from '@/utils/validate'
import { skipToError, viewFile, strToArr } from '@/utils/commo'
import useUserStore from '@/store/modules/user'
import SubmissionProcess from '@/businessComponents/SubmissionProcess'
import {
  listProcess,
  getBusinessProStatus,
  getNodeData
} from '@/api/workflow/process'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()
const props = defineProps({
  situationId: {
    type: [Number, String],
    require: true
  },
  situationData: {
    type: [Object],
    require: true
  },
  id: {
    type: [Number, String],
    require: false
  }
})
const emit = defineEmits(['processFun', 'saveFun'])

const { implementation_risk, implementation_risk_level } = proxy.useDict(
  'implementation_risk', //实施风险
  'implementation_risk_level' //实施风险等级
)
const data = reactive({
  loading: false,
  formData: {
    createName: userStore.userInfo.nickName,
    detailList: []
  },
  formRules: {
    proName: [
      {
        required: true,
        message: '请输入项目名称',
        trigger: 'blur'
      }
    ],
    proNum: [
      {
        required: true,
        message: '请输入项目编号',
        trigger: 'blur'
      }
    ],
    implementationDate: [
      {
        required: true,
        message: '请选择实施日期',
        trigger: 'change'
      }
    ],
    cycleArr: [
      {
        required: true,
        message: '请选择周期日期',
        trigger: 'change'
      }
    ],
    projectLeaderName: [
      {
        required: true,
        message: '请选择项目负责人',
        trigger: 'change'
      }
    ],
    detailList: [
      {
        required: true,
        message: '请增加详情',
        trigger: 'change'
      }
    ]
  },
  crudOptionDetails: {
    header: true,
    menu: true,
    menuFixed: 'right',
    delBtn: false,
    editBtn: false,
    addBtn: false,
    addRowBtn: false,
    saveBtn: false,
    cancelBtn: false,
    cellBtn: false,
    // searchBtn: false,
    refreshBtn: false,
    columnBtn: false,
    menuWidth: 100,
    border: true,
    column: [
      {
        label: '实施情况',
        prop: 'situation',
        cell: true,
        minWidth: 200,
        type: 'textarea',
        minRows: 1,
        rules: [
          {
            required: true,
            message: '请输入实施情况',
            trigger: 'blur'
          }
        ]
      },
      {
        label: '存在风险',
        prop: 'risk',
        type: 'select',
        dicData: implementation_risk,
        cell: true,
        minWidth: 200,
        rules: [
          {
            required: true,
            message: '请选择存在风险',
            trigger: 'change'
          }
        ]
      },
      {
        label: '风险描述',
        prop: 'riskDescription',
        minWidth: 200,
        type: 'textarea',
        minRows: 1,
        cell: true
      },
      {
        label: '风险等级',
        prop: 'riskLevel',
        type: 'select',
        dicData: implementation_risk_level,
        minWidth: 100,
        cell: true
      },
      {
        label: '响应计划',
        prop: 'responsePlan',
        minWidth: 200,
        type: 'textarea',
        minRows: 1,
        cell: true
      },
      {
        label: '责任人',
        prop: 'chargePersonName',
        cell: true,
        minWidth: 200,
        rules: [
          {
            required: true,
            message: '请选择责任人',
            trigger: 'change'
          }
        ]
      },
      {
        label: '备注',
        prop: 'remark',
        minWidth: 200,
        type: 'textarea',
        minRows: 1,
        cell: true
      }
    ]
  }
})
let { loading, formData, formRules, crudOptionDetails } = toRefs(data)

const isExamine = ref(true) // 判断是否走审批按钮
watch(
  [() => props.situationData, () => props.situationId, () => props.id],
  async () => {
    if (props.situationData) {
      let situationData = props.situationData
      formData.value = {
        ...situationData,
        detailList: [],
        createName: userStore.userInfo.nickName
      }
      isExamine.value = true
      // 走业务流程
      initFlowFn('33')
    } else if (props.situationId) {
      await getFormData(props.situationId)
      //根据业务查询审批状态
      await getBusinessProStatusFn()
      // 判断表单是否可编辑  获取当前流程节点
      let res = await getNodeData(props.situationId)
      bpmnStatus.value = res.data?.nowTaskName
      formDisabled.value =
        res.data == null || res.data?.isFirst == 'Y' ? false : true
    } else if (props.id && route.name == 'WorkDetail') {
      await getFormData(props.id)
      // 获取流程节点数据
      if (route.query.processed) {
        // fieldDisabled.value
        let res = await getNodeData(props.id)
        if (res.code !== 200) return
        bpmnStatus.value = res.data?.nowTaskName
        // formDisabled.value =
        //   res.data == null || res.data?.isFirst == 'Y' ? false : true
        try {
          formDisabled.value = res.data?.formDisabled
        } catch (error) {}
        try {
          let resDis = res.data?.fieldDisabled
          fieldDisabled.value = resDis
            ? resDis.replaceAll(',', '，').split('，')
            : []
        } catch (error) {}
        try {
          let resHid = res.data?.fieldHidden
          fieldHidden.value = resHid
            ? resHid.replaceAll(',', '，').split('，')
            : []
        } catch (error) {}
      }
      formDisabled.value =
        !formDisabled.value && route.query.processed == 'true' ? false : true
      isCanStart.value = false
    }
  },
  {
    immediate: true
  }
)
// 获取表单信息
async function getFormData(id) {
  loading.value = true
  let res = await getSituationDetail(id)
  if (res.code !== 200) return
  let resData = {}
  resData = res.data

  // 明细行可编辑
  if (resData.detailList.length > 0) {
    resData.detailList.forEach((e, i) => {
      if (e.id) {
        resData.detailList[i].$cellEdit = true
      }
    })
  }

  formData.value = resData
  loading.value = false
}

// 保存
function handleSubmit(type) {
  return new Promise((resolve, reject) => {
    // 子表校验
    let subtableCheck = true
    let errMsg = []
    proxy.$refs.form.validate(async (valid, msg) => {
      // 明细信息校验
      let err = await proxy.$refs.crudDetail.validateCellForm()
      if (err) {
        errMsg.push(`实施情况明细---${err[Object.keys(err)[0]][0].message}`)
      }
      subtableCheck = subtableCheck ? !err : subtableCheck

      let errDetail = formData.value.detailList.filter(item => {
        return (
          item.risk != '1' &&
          (!item.riskDescription || !item.riskLevel || !item.responsePlan)
        )
      })
      if (errDetail.length > 0) {
        errMsg.push(
          `实施情况:${errDetail[0].situation}存在风险请填写风险描述、风险等级、响应计划`
        )
        subtableCheck = subtableCheck ? false : subtableCheck
      }

      if (msg) errMsg.unshift(`${msg[Object.keys(msg)[0]][0].message}`)
      if (valid && subtableCheck) {
        let res = await saveForm(type)
        resolve(res)
      } else {
        if (errMsg.length > 0) proxy.$modal.msgError(errMsg[0])
        skipToError()
      }
    })
  })
}
// 保存表单
async function saveForm(type) {
  new Promise((resolve, reject) => {
    setSituation(formData.value).then(async res => {
      if (res.code !== 200) {
        reject(res)
        return
      }
      resolve(res)
      await getFormData(res.data.id)
      // 审批流程id赋值
      examineParam.value.businessId = res.data.id
      if (type == 'examine') {
        handleExamine()
      } else if (type == 'save') {
        emit('saveFun')
        proxy.$message({
          type: 'success',
          message: '保存成功!'
        })
        // proxy.useReturn(
        //   '',
        //   () => {
        //     //返回上一步
        //     handleReturn()
        //   },
        //   async () => {
        //     //继续
        //   }
        // )
      }
    })
  })
}
// 流程同意调用的方法
async function handleSave() {
  if (!formDisabled.value) {
    return await handleSubmit()
  }
}

const uploadType = {
  contract: ['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.png', '.jpeg']
}
/**文件上传 限制条件
 *
 * @param {*} rawFile
 */
function beforeAvatarUpload(rawFile, group) {
  const ext = rawFile.name.substring(rawFile.name.lastIndexOf('.'))
  const allowType = uploadType['contract'].indexOf(ext) > -1
  const isLt2M = rawFile.size / 1024 / 1024 < 200

  if (!allowType) {
    proxy.$message.error(
      `上传文件只能是${uploadType['contract']
        .toString()
        .replace(/\./g, '')
        .replace(/,/g, '、')}格式!`
    )
  } else if (!isLt2M) {
    proxy.$message.error('上传文件大小不能超过 200MB!')
  }
  return allowType && isLt2M
}
// 上传附件
function requestFile(params, group) {
  formData.value[group] = strToArr(formData.value[group])
  let uploadData = new FormData()
  uploadData.append('file', params.file)
  // uploadData.append('bucketName', 'article')
  uploadFile(uploadData).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess(`${res.data.origFileName}上传成功`)
      formData.value[group].push(res.data)
    }
  })
}
// 删除附件
async function delFileName(index, group) {
  try {
    proxy.$modal.confirm('是否删除该文件').then(async () => {
      // let fule = {
      //   // bucketName: 'article',
      //   fileName: formData.value[group][index].fileName
      // }
      const res = await delFile(formData.value[group][index].fileName)
      if (res.code === 200) {
        formData.value[group].splice(index, 1)
        proxy.$modal.msgSuccess(res.data)
      }
    })
  } catch (error) {
    proxy.$modal.msgError(error)
  }
}
// 预览文件
function viewFiles(url) {
  viewFile(url, useUserStore().userInfo.nickName)
}

const examineParam = ref({}) // 传递的参数
const flowOptions = ref([]) // 该业务的流程数据
const isCanStart = ref(true) // 判断该业务是否可以审批发起 以及办理详情 访问的时候不能审批 ===》针对编辑页面  办理详情
const bpmnStatus = ref('') //表单标题
const formDisabled = ref(false) // 禁用表单
const fieldDisabled = ref([]) // 禁用字段
const fieldHidden = ref([]) // 隐藏字段
/***************************业务流程 模块 start****************************************************************/
/*****审批模块  start*** */
/**
 * 提交审批 按钮
 发布需要的参数 examineParam 参数说明
  visible弹出框是否显示
  businessId //业务id
  businessName//业务名称（如：项目模块 businessName：项目名称）
  amount// 流程设计里面设计的条件参数值
  categoryCode //==>流程分类 页面查看 分类编码：项目1，订单2 客户3 	投标4 采购13 销售14
/**
 * 提交审批 按钮
 */
const handleExamine = async () => {
  if (!examineParam.value.businessId) {
    proxy.$modal.msgWarning('请重新发起审批')
    return false
  }
  examineParam.value.businessName = formData.value.fileName //标题
  examineParam.value.categoryCode = '33' //分类编码：项目1，订单2 客户3 	投标4
  // examineParam.value.type = Number(formData.value.type) //判断供应商来源
  // examineParam.value.initiateParams = {
  //   type: Number(formData.value.type) //判断供应商来源
  // }
  examineParam.value.visible = true
}
// 关闭
const handleClose = type => {
  emit('processFun')
  switch (type) {
    case 'examine':
      //弹出框关闭
      examineParam.value.visible = false
      break
    case 'initiate':
      //审批 发起成功
      isCanStart.value = false
      examineParam.value.visible = false
      break
  }
}
/*****审批模块  end*** */
/**
 * 业务流程整体思路：
 * 1.查询该业务是否有流程
 * 2.根据该业务流程来判断
 * * 2.1没有流程-提示不能新建数据
 * 3.点击发起申请【调组件】
 * * 只有一条流程时，下一环节人的显示 -再发起
 * * 多条流程时，选择流程，再选下一环节人的显示 -再发起
 * @param {*} type  业务类型 项目是1 订单业务2 	客户模块业务3 采购13
 */

async function initFlowFn(type) {
  // 1.查询该业务是否有流程
  let comRes = await listProcess({
    pageNum: 1,
    pageSize: 9999,
    category: type
  })
  flowOptions.value = comRes.rows || []
  // 2.根据
  if (JSON.stringify(flowOptions.value) == '[]') {
    //2.1 没有流程-提示不能新建数据
    if (route.name == type.name) {
      // 新建页面
      proxy.$modal.msgError('该业务没有配置流程，请先创建流程')
    } else {
      //编辑页面
      isExamine.value = false
    }
  } else {
    isExamine.value = true
  }
}
// 编辑页面的时候 -》根据业务查询审批状态
async function getBusinessProStatusFn() {
  let statusRes = await getBusinessProStatus({ businessId: formData.value.id })
  if (statusRes.data.canStart) {
    // canStart false时 不能发起，true则可以发起
    isCanStart.value = true
    initFlowFn('33')
  } else {
    isCanStart.value = false
  }
  // if (statusRes.data.status) {
  //   // status判断流程环节05表示结束
  //   isCanStart.value = true
  // } else {
  //   isCanStart.value = false
  // }
}
/***************************业务流程 模块 end****************************************************************/

/**
 * 人员选择
 * @param keyName handleId:经办人  projectLeaderName:销售人员
 */
const dialogParam = ref({})
function selectUserFn(keyName, index) {
  switch (keyName) {
    case 'chargePersonName':
      dialogParam.value.type = {
        type: keyName,
        index
      }
      dialogParam.value.title = '请选择责任人'
      dialogParam.value.isDialog = true
      dialogParam.value.multiple = false
      dialogParam.value.nodeKey = 'uuid'
      dialogParam.value.defaultCheckedKeys = [
        `U${formData.value.detailList[index].chargePerson}`
      ]
      dialogParam.value.dataType = 'person'
      break
    case 'projectLeaderName':
      dialogParam.value.type = keyName
      dialogParam.value.title = '请选择项目负责人'
      dialogParam.value.isDialog = true
      dialogParam.value.multiple = false
      dialogParam.value.nodeKey = 'uuid'
      dialogParam.value.defaultCheckedKeys = [
        `U${formData.value.projectLeader}`
      ]
      dialogParam.value.dataType = 'person'
      break
  }
}

// 人员选择确定
const selectDialogData = async val => {
  let type = typeof val.type == 'object' ? val.type.type : val.type
  switch (type) {
    case 'chargePersonName':
      formData.value.detailList[val.type.index].chargePersonName =
        val.labelData.toString()
      formData.value.detailList[val.type.index].chargePerson =
        val.defaultCheckedKeys
          ? val.defaultCheckedKeys.toString().replace('U', '')
          : null
      break
    case 'projectLeaderName':
      formData.value.projectLeaderName = val.labelData.toString()
      formData.value.projectLeader = val.defaultCheckedKeys
        ? val.defaultCheckedKeys.toString().replace('U', '')
        : null
      break

    /* case 'projectLeader':
      userOption.value.projectLeader = val.selectData
      formData.value.projectLeader = val.defaultCheckedKeys
      break */
  }
}

// 添加明细
function addEducation() {
  formData.value.detailList.push({
    $cellEdit: true
  })
}
// 删除明细行
function delEducation(row, index, done) {
  proxy
    .$confirm('是否删除该明细', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      if (row.id) {
        delSituationDetailById(row.id).then(e => {
          formData.value.detailList.splice(index, 1)
          proxy.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      } else {
        formData.value.detailList.splice(index, 1)
        proxy.$message({
          type: 'success',
          message: '删除成功!'
        })
      }
    })
    .catch(() => {})
}

// 初始化
function init() {}

init()
// 返回、关闭页面
function handleReturn() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
  // router.push({ path: url, query: data })
  //   proxy.$refs.form.clearValidate()
}
//暴露出保存方法
defineExpose({ handleSave })
</script>
<style scoped>
.form-box :deep(.w-full) {
  width: 100%;
}
/* .order-form :deep(.avue-crud__menu) {
  border-bottom: 1px solid #eee;
} */
.form-box .el-collapse {
  border-top: none;
}
.form-box:deep(.form-title:before) {
  content: '▋';
  display: inline-block;
  color: #409eff;
}

:deep(.avue-crud__empty) {
  padding: 0;
}
</style>

<style lang="scss" scoped>
.tatle-box {
  padding: 20px;
  table {
    @apply border-collapse w-full;
    td {
      @apply border border-solid border-gray-300 p-2;
      box-sizing: border-box;
    }
  }
}
</style>
